import { SafeAreaView, FlatList, Text, StyleSheet, View, TouchableOpacity, Clipboard } from 'react-native'
import React, { Component } from 'react'
import { Button, InputItem, Toast } from '@ant-design/react-native'
import { pTx } from "../../utils/dimensions"
import ShadowCard from "../../utils/shadowCard"
import LinearGradient from 'react-native-linear-gradient';

const renderItem = ({ item }) => (
    <Text style={styles.renderItem}>{item}</Text>
);

export default class NewMnemonicPhrase extends Component {
    constructor(props) {
        super(props)
        this.state = {
            mnemonic: props.route.params.wallet.mnemonic,
            wallet: props.route.params.wallet,
        }
    }
    copyToClipboard = async () => {
        try {
            Clipboard.setString(this.state.mnemonic.join(" "))
            Toast.info('复制成功')
        } catch (error) {
            console.log(error)
            Toast.info('复制失败')
        }
    }

    FinishCreateWallet = async () => {
        try {
            this.props.navigation.navigate('backupMnemonic', { wallet: this.state.wallet, password: this.props.route.params.password })
        } catch (error) {
            Toast.info(error)
        }
    }

    render() {
        return (
            <>
                <View style={styles.page}>
                    <Text style={styles.text}>请在纸上记录下助记词并妥善保管</Text>
                    <SafeAreaView style={styles.container}>
                        <FlatList
                            data={this.state.mnemonic}
                            renderItem={renderItem}
                            keyExtractor={(item, index) => index}
                            horizontal={false}
                            numColumns={3}
                        />
                        <TouchableOpacity onPress={() => this.copyToClipboard()}>
                            <Text style={styles.copy}>复制到剪贴板</Text>
                        </TouchableOpacity>
                    </SafeAreaView>
                </View>
                <View style={styles.footerButton}>
                    <ShadowCard style={styles.button}>
                        <LinearGradient
                            colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                            start={{ x: 0.25, y: 0.25 }}
                            end={{ x: 0.75, y: 0.75 }}
                            style={[styles.linearGradient]}>
                            <TouchableOpacity type="primary" style={[styles.button]} onPress={this.FinishCreateWallet}>
                                <Text style={styles.ButtonText}>下一步</Text>
                            </TouchableOpacity>
                        </LinearGradient>
                    </ShadowCard>
                </View>
            </>
        )
    }
}

const styles = StyleSheet.create({
    page: {
        flex: 1
    },
    text: {
        paddingTop: pTx(20),
        alignSelf: "center",
        color: "rgba(114, 114, 114, 1)",
        fontSize: pTx(12)
    },
    container: {
        marginTop: pTx(18),
        marginHorizontal: pTx(35),
        paddingVertical: pTx(15),
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderRadius: 6
    },
    flatList: {
        flexDirection: "row",
        flexWrap: "wrap"
    },
    renderItem: {
        marginVertical: pTx(15),
        textAlign: "center",
        flex: 1
    },
    copy: {
        paddingVertical: pTx(27),
        alignSelf: "center",
        fontSize: pTx(16),
        color: "rgba(6, 193, 97, 1)",
    },
    footerButton: {
        paddingTop: pTx(15),
        paddingBottom: pTx(63),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 6
    },
    button: {
        width: pTx(303),
        height: pTx(55),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(14),
        fontWeight: 'bold'
    }
})